<template>
  <div class="pop-message" :style="style[type]" v-show="visible">
    <i class="iconfont" v-if="type==='success'">&#xe77d;</i>
    <i class="iconfont" v-if="type==='error'">&#xe77e;</i>
    <i class="iconfont" v-if="type==='warn'">&#xe785;</i>
    <span class="text">{{ str }}</span>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
export default {
  name: 'myMessage',
  props: {
    type: {
      type: String,
      default: 'success'
    },
    str: {
      type: String,
      default: '登陆成功'
    }
  },
  setup () {
    const style = {
      warn: {
        color: '#E6A23C',
        backgroundColor: 'white',
        borderColor: 'rgb(250, 236, 216)'
      },
      error: {
        color: '#F56C6C',
        backgroundColor: 'white',
        borderColor: 'rgb(253, 226, 226)'
      },
      success: {
        color: '#67C23A',
        backgroundColor: 'white',
        borderColor: 'rgb(225, 243, 216)'
      }
    }
    const icon = {
      warn: {
        icon: '&#xe785;'
      },
      error: {
        icon: '&#xe77e;'
      },
      success: {
        icon: '&#xe77d;'
      }
    }
    const visible = ref(false)
    onMounted(() => {
      visible.value = true
    })
    return { style, icon, visible }
  }
}
</script>

<style scoped lang="less">
.pop-message {
  font-weight: 100;
  box-shadow: 10px 10px 5px rgba(0,0,0,0.1); /*blur值为5px*/
  position: fixed;
  z-index: 23456765439;
  left: 50%;
  margin-left: -150px;
  top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 50px;
  border: 1px solid #9d9d9d;
  background: #f5f5f5;
  color: #999;
  border-radius: 4px;
  animation: move 0.38s linear forwards;
  @keyframes move {
    0% {
      transform: translate3d(0, -75px, 0);
      opacity: 0.16;
    }

    50% {
      opacity: 0.68;
    }

    100% {
      transform: none;
      opacity: 1;
    }
  }
}
</style>
